<template>
    <div>
        <el-table
                :data="tableData"
                border
                empty-text="暂无数据"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="所属公司：">
                            <span>{{ props.row.companyName }}</span>
                        </el-form-item>
                        <el-form-item label="所在省份：">
                            <span>{{ props.row.region.split(',')[0] }}</span>
                        </el-form-item>
                        <el-form-item label="所在城市：">
                            <span>{{ props.row.region.split(',')[1] }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="真实姓名"
                    property="employeeName"
                    width="70">
            </el-table-column>
            <el-table-column
                    label="手机号"
                    property="telphone"
                    width="95">
            </el-table-column>
            <el-table-column
                    label="营业执照"
                    width="70"
                    center>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="viewBusinessLience(scope.row.businessLicense)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label="身份证照片"
                    width="90">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="viewIdCard(scope.row.idCards)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请人照片"
                    width="90">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="viewApplicants(scope.row.applicants)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请时间"
                    property="createdTime"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="审批状态"
                    width="80">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.auditStatus=='通过'">{{scope.row.auditStatus}}</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.auditStatus=='拒绝'">{{scope.row.auditStatus}}</el-tag>
                    <el-tag type="info" v-else-if="scope.row.auditStatus=='驳回修改'">{{scope.row.auditStatus}}</el-tag>
                    <el-tag v-else="scope.row.auditStatus=='待审核'">{{scope.row.auditStatus}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="审批人"
                    property="auditBy"
                    width="60">
            </el-table-column>
            <el-table-column
                    label="审批时间"
                    property="auditTime"
                    width="150">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-view"
                            @click="viewData(scope.$index, scope.row)">查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="员工详情" :visible.sync="dialogFormVisible" top="10vh" width="70%">
            <div style="height:400px;overflow-y: auto">
                <el-row>
                    <el-col :span="4" class="m-col">真实姓名</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.employeeName}}</el-col>
                    <el-col :span="4" class="m-col-left">手机号</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.telphone}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col">所属公司</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.companyName}}</el-col>
                    <el-col :span="4" class="m-col-left">所属省份</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.region.split(',')[0]}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col">所属城市</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.region.split(',')[1]}}</el-col>
                    <el-col :span="4" class="m-col-left">申请时间</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.createdTime}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col">审批人</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.auditBy}}</el-col>
                    <el-col :span="4" class="m-col-left">审批时间</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.auditTime}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col">审批状态</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.auditStatus}}</el-col>
                    <el-col :span="4" class="m-col-left">修改意见</el-col>
                    <el-col :span="8" class="m-col-left">{{formData.auditDesc}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col-bottom" style="border-top: 1px solid #ebeef5;">公司logo</el-col>
                    <el-col :span="20" class="m-col-bottom-left" style="border-top: 1px solid #ebeef5;">
                        <div style="margin-top: 25px">
                            <div style="width: 100px;height: 100px" @click="showImg(formData.companyLogo.url)">
                                <img :src="formData.companyLogo==null?'':baseUrl+formData.companyLogo.url"
                                     style="width:100%;height:100%;margin-left:20px"></img>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col-bottom" style="border-top: 1px solid #ebeef5;">营业执照</el-col>
                    <el-col :span="20" class="m-col-bottom-left" style="border-top: 1px solid #ebeef5;">
                        <div style="margin-top: 25px">
                            <div style="width: 100px;height: 100px" @click="showImg(formData.businessLicense.url)">
                                <img :src="formData.businessLicense==null?'':baseUrl+formData.businessLicense.url"
                                     style="width:100%;height:100%;margin-left:20px"></img>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col-bottom" style="height:350px">身份证</el-col>
                    <el-col :span="20" class="m-col-bottom-left" style="height:350px">
                        <div style="margin-top: 25px" v-for="item in formData.idCards">
                            <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:20px"
                                 @click="showImg(item.url)">
                                <img :src="baseUrl+item.url"
                                     style="width:100%;height:100%;"></img>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4" class="m-col-bottom">负责人照片</el-col>
                    <el-col :span="20" class="m-col-bottom-left">
                        <div style="margin-top: 25px">
                            <div style="width: 100px;height: 100px" @click="showImg(formData.applicants.url)">
                                <img :src="formData.applicants==null?'':baseUrl+formData.applicants.url"
                                     style="margin-left:20px;width:100%;height:100%;"></img>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="handleSuccess" :loading="loading1">通过</el-button>
                <el-button type="primary" @click="editRejectUpdate" :loading="loading2">驳回修改</el-button>
                <el-button type="danger" @click="handleReject" :loading="loading3">拒绝</el-button>
            </div>
        </el-dialog>
        <el-dialog title="营业执照" :visible.sync="dialogBusinessLienceFormVisible" top="10vh">
            <div style="text-align: center">
                <img :src="baseUrl+businessLience.url" v-if="businessLience!=null" style="width:80%;height:auto">
                <span v-else>无图片</span>
            </div>
            <div slot="footer" class="dialog-footer">

            </div>
        </el-dialog>
        <el-dialog title="身份证照" :visible.sync="dialogIdcardFormVisible" top="10vh">
            <div style="text-align: center">
                <img :src="baseUrl+item.url" v-if="idcard.size!=0" v-for="item in idcard"
                     style="width:80%;height:auto;">
                <span v-else>无图片</span>
            </div>
            <div slot="footer" class="dialog-footer">

            </div>
        </el-dialog>
        <el-dialog title="申请人照" :visible.sync="dialogApplicantsFormVisible" top="10vh">
            <div style="text-align: center">
                <img :src="baseUrl+applicants.url" v-if="applicants!=null" style="width:80%;height:auto">
                <span v-else>无图片</span>
            </div>
            <div slot="footer" class="dialog-footer">

            </div>
        </el-dialog>
        <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
            <div style="text-align: center">
                <img :src="baseUrl+imgUrl" style="width:80%;height: auto">
            </div>
            <div slot="footer" class="dialog-footer">

            </div>
        </el-dialog>
        <el-dialog title="审批意见" :visible.sync="dialogAuditFormVisible" top="10vh">
            <el-form :model="auditData" :rules="rules" ref="ruleForm">
                <el-form-item label="意见" label-width="50px" prop="auditDesc">
                    <el-input type="textarea" v-model="auditData.auditDesc" auto-complete="off" :rows="6"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAuditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleRejectUpdate" :loading="loading">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .m-col {
        border: 1px solid #ebeef5;
        border-bottom: none;
        padding-left: 10px;
        height: 40px;
        line-height: 40px;
        color: #909399;
        font-weight: 500;
    }

    .m-col-left {
        border: 1px solid #ebeef5;
        border-left: none;
        border-bottom: none;
        padding-left: 10px;
        height: 40px;
        line-height: 40px;
    }

    .m-col-bottom {
        border: 1px solid #ebeef5;
        border-top: none;
        padding-left: 10px;
        height: 250px;
        line-height: 250px;
        color: #909399;
        font-weight: 500;
    }

    .m-col-bottom-left {
        border: 1px solid #ebeef5;
        border-top: none;
        border-left: none;
        padding-left: 10px;
        height: 250px;
        line-height: 250px;
    }
</style>

<script>
  import insuranceServiceEmployeeApi from '@/api/insuranceServiceEmployeeApi'

  export default {
    created() {
      this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
    },
    props: {
      defaultCurrentPage: { type: Number },
      defaultPageSize: { type: Number },
      defaultTableSearchParam: { type: Object }
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        dialogImgFormVisible: false,
        imgUrl: '',
        dialogBusinessLienceFormVisible: false,
        dialogApplicantsFormVisible: false,
        dialogIdcardFormVisible: false,
        businessLience: null,
        idcard: [],
        applicants: null,
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '70px',
        formData: {
          companyName: '',
          employeeName: '',
          telphone: '',
          region: '',
          address: '',
          businessLicense: {},
          idCards: [],
          applicants: {}

        },
        loading: false,
        loading1: false,
        loading2: false,
        loading3: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          auditDesc: [
            { required: true, message: '请输入意见', trigger: 'blur' }
          ]
        },
        dialogAuditFormVisible: false,
        auditData: {
          auditStatus: '',
          auditDesc: ''
        }
      }
    },
    methods: {
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      listTableData(tableSearchParam, currentPage, pageSize) {
        insuranceServiceEmployeeApi.listManager(tableSearchParam, currentPage, pageSize, (res) => {
          this.tableData = res.list
          this.$emit('total', res.total)
        }, () => {
        })
      },
      viewData(index, row) {
        //清空历史值
        this.formData = {
          companyName: '',
          employeeName: '',
          telphone: '',
          region: '',
          businessLicense: {},
          idCards: [],
          applicants: {},
          address: ''
        }
        for (var t of this.tableData) {
          if (t.id == row.id) {
            this.auditData.id = t.id
            this.formData = t
            break
          }
        }
        this.dialogFormVisible = true
      },
      viewBusinessLience(o) {
        this.businessLience = o
        this.dialogBusinessLienceFormVisible = true
      },
      viewIdCard(o) {
        this.idcard = o
        this.dialogIdcardFormVisible = true
      },
      viewApplicants(o) {
        this.applicants = o
        this.dialogApplicantsFormVisible = true
      },
      handleSuccess() {
        this.auditData.auditStatus = '2'
        this.auditData.auditDesc = ''
        this.loading1 = true
        insuranceServiceEmployeeApi.auditRescueCompanyManager(this.auditData.id, this.auditData, (res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.loading1 = false
          this.dialogFormVisible = false
          this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
        }, () => {
          this.loading1 = false
        })
      },
      editRejectUpdate() {
        this.auditData.auditDesc = ''
        this.dialogAuditFormVisible = true
      },
      handleRejectUpdate() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.auditData.auditStatus = '1'
            this.loading2 = true
            insuranceServiceEmployeeApi.auditRescueCompanyManager(this.auditData.id, this.auditData, (res) => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.loading2 = false
              this.dialogAuditFormVisible = false
              this.dialogFormVisible = false
              this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
            }, () => {
              this.loading2 = false
            })
          }
        })
      },
      handleReject() {
        this.auditData.auditStatus = '3'
        this.auditData.auditDesc = ''
        this.loading3 = true
        insuranceServiceEmployeeApi.auditRescueCompanyManager(this.auditData.id, this.auditData, (res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.loading3 = false
          this.dialogFormVisible = false
          this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
        }, () => {
          this.loading3 = false
        })
      }
    }
  }
</script>
